<%@page import="study.itwill.team5.admin.AdminItem"%>
<%@page import="study.itwill.jsp.WebHandler"%>
<%@page import="study.itwill.common.PatternChecker"%>
<%@page import="study.itwill.team5.house.HouseCityItem"%>
<%@page import="study.itwill.team5.house.HouseCity"%>
<%@page import="java.util.ArrayList"%>
<%@page import="study.itwill.common.DBHandler"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ page trimDirectiveWhitespaces="true"%>
<%@ include file="../session.jsp"%>
<%@ include file="../dbcon.jsp"%>
<%
	int seq = web.getInt("city");
	
	if (seq == -1) {
		db.disconnect();
		web.goPage(null, "파라미터가 잘못되었습니다.");
		return;
	}

	// 민박 도시에 대한 ArrayList 받아오기
	HouseCity city = new HouseCity();
	ArrayList<HouseCityItem> city_list = city.listCity(0);
	
%>
<!DOCTYPE html>
<html lang="ko">
<head>
<%@ include file="../head.jsp"%>
	<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
	<script type="text/javascript">
	  function codeAddress() {
	   var geocoder = new google.maps.Geocoder();
	   
	    var address = document.getElementById("address").value;
	    geocoder.geocode( { 'address': address}, function(results, status) {
	      if (status == google.maps.GeocoderStatus.OK) {
	        //alert(results[0].geometry.location.lat());
	        //alert(results[0].geometry.location.lng());
	        document.getElementById("lat").value = results[0].geometry.location.lat();
	        document.getElementById("lng").value = results[0].geometry.location.lng();
	      } else {
	        alert("Geocode was not successful for the following reason: " + status);
	      }
	    });
	  }
	</script>
	<style type="text/css">
		body {
			margin-top : 30px;
		}
	</style>
</head>
<body>
	<%@ include file="../menu.jsp"%>
	<div class="container">
		<div class="page-header">
			<h1>
				신규 민박 추가 - <small>새로운 민박을 추가하세요.</small>
			</h1>
		</div>

		<form id="frmHouseAdd" class="form-horizontal" role="form"
			method="post" action="addHouseOk.jsp" enctype="multipart/form-data">
			<fieldset>

				<!-- 입력양식 -->
				<div class="form-group">
					<label for="house_city_seq" class="col-md-2 control-label">게시판
						카테고리</label>
					<div class="col-md-10">
						<select id="house_city_seq" name="house_city_seq"
							class="form-control">
							<option>----- 선택하세요 -----</option>
							<%
							if (city_list != null) {
								for (int i=0; i<city_list.size(); i++) {
									HouseCityItem item = city_list.get(i);
									if (item.getSeq() == seq) {
						%>
							<option value="<%=item.getSeq()%>" selected><%=item.getCity_name()%></option>
							<%				
									} else {
						%>
							<option value="<%=item.getSeq()%>"><%=item.getCity_name()%></option>
							<%
									}
								}
							}
						%>
						</select>
					</div>
				</div>
				<div class="form-group">
					<label for="name" class="col-md-2 control-label">민박이름</label>
					<div class="col-md-10">
						<input type="text" class="form-control" id="name"
							placeholder="민박이름을 입력하세요" name="name" autofocus>
					</div>
				</div>

				<div class="form-group">
					<label for="address1" class="col-md-2 control-label">나라</label>
					<div class="col-md-10">
						<input type="text" class="form-control" id="address1"
							placeholder="나라를 입력하세요" name="address1">
					</div>
				</div>

				<div class="form-group">
					<label for="address2" class="col-md-2 control-label">도시</label>
					<div class="col-md-10">
						<input type="text" class="form-control" id="address2"
							placeholder="도시를 입력하세요" name="address2">
					</div>
				</div>

				<!-- 입력양식 -->
	    		<div class="form-group">
	    			<label for="address" class="col-md-2 control-label">주소를 입력하세요.</label>
					<div class="col-md-10">
						<input id="address" name="address" type="text" placeholder="주소를 입력하세요." />
						<input id="lat" name="lat" type="text" placeholder="Search버튼을 클릭하세요." />
				    	<input id="lng" name="lng" type="text" placeholder="Search버튼을 클릭하세요." />
				    	<input type="button" value="Search" onclick="codeAddress()" />
				  	</div>
	    		</div>
	    		<!-- 입력양식 -->

				<div class="form-group">
					<label for="address4" class="col-md-2 control-label">간단주소</label>
					<div class="col-md-10">
						<input type="text" class="form-control" id="address4"
							placeholder="간단주소를 입력하세요" name="address4">
					</div>
				</div>

				<div class="form-group">
					<label for="email" class="col-md-2 control-label">이메일</label>
					<div class="col-md-10">
						<input type="email" class="form-control" id="email"
							placeholder="이메일주소를 입력하세요" name="email">
					</div>
				</div>

				<div class="form-group">
					<label for="homepage" class="col-md-2 control-label">홈페이지</label>
					<div class="col-md-10">
						<input type="url" class="form-control" id="homepage"
							placeholder="홈페이지주소를 입력하세요" name="homepage">
					</div>
				</div>

				<div class="form-group">
					<label for="info" class="col-md-2 control-label">상세정보</label>
					<div class="col-md-10">
						<textarea id="info" name="info" class="form-control" rows="7"
							placeholder="상세정보를 입력하세요"></textarea>
					</div>
				</div>

				<div class="form-group">
					<label for="tel[]" class="col-md-2 control-label">연락처</label>
					<div class="col-md-10">
						<p class="form-control-static">
							<a href="#" id="frmTelAdd">추가하기</a>
						</p>
						<input type='tel' class='form-control' placeholder='연락처를 입력하세요'
							name='tel[]'>
						<div id="tel_add"></div>
					</div>
				</div>

				<div class="form-group">
					<label for="image[]" class="col-md-2 control-label">이미지</label>
					<div class="col-md-10">
						<input type='file' class='form-control' placeholder='이미지를 추가하세요'
							name='image[]' multiple>
					</div>
				</div>

				<div class="form-group">
					<label for="room[]" class="col-md-2 control-label">룸</label>
					<div class="col-md-10">
						<p class="form-control-static">
							<a href="#" id="frmRoomAdd">추가하기</a>
						</p>
						<div class="form-group">
							<div class="col-md-3 input-group">
								<span class="input-group-addon">룸이름</span><input type="text"
									class="form-control" name="room_name[]" />
							</div>
							<div class="col-md-2 input-group">
								<span class="input-group-addon">최대인원</span><input type="text"
									class="form-control" name="limit_person[]" />
							</div>
							<div class="col-md-3 input-group">
								<span class="input-group-addon">비수기가격</span><input type="text"
									class="form-control" name="off_price[]" />
							</div>
							<div class="col-md-3 input-group">
								<span class="input-group-addon">성수기가격</span><input type="text"
									class="form-control" name="on_price[]" />
							</div>
						</div>
						<div id="room_add"></div>
					</div>
				</div>

				<div class="form-group">
					<div class="col-md-offset-2 col-md-10">
						<div class="row">
							<div class="col-md-6">
								<button type="submit" class="btn btn-primary btn-block">저장하기</button>
							</div>
							<div class="col-md-6">
								<button type="reset" class="btn btn-warning btn-block">다시작성</button>
							</div>
						</div>

					</div>
				</div>
			</fieldset>
		</form>
	</div>
	<% db.disconnect(); %>
	<!-- Javascript -->
	<script src="/Team-Project/assets/js/jquery.js"></script>
	<script src="/Team-Project/assets/js/bootstrap.min.js"></script>
	<!-- 형식검사 클래스 참조 -->
	<script src="/Team-Project/assets/js/string.js"></script>
	<!-- 구현부분 -->
	<script type="text/javascript">
		// jquery main()
		$(function() {
			$("#frmHouseAdd").submit(function() {
				
				// 도시 선택여부 검사
				if ($("select[name='house_city_seq'] > option:selected").index() < 1) {
					alert("도시를 선택하세요.");
					$("select[name='house_city_seq']").focus();
					return false;
				}
				
				// 민박이름 입력여부 검사
				if (!$("input[name='name']").val().isValue()) {
					alert("민박이름을 입력하세요.");
					$("input[name='name']").focus();
					return false;
				}
				
				// 나라 입력여부 검사
				if (!$("input[name='address1']").val().isValue()) {
					alert("나라를 입력하세요.");
					$("input[name='address1']").focus();
					return false;
				}
				
				// 도시 입력여부 검사
				if (!$("input[name='address2']").val().isValue()) {
					alert("도시를 입력하세요.");
					$("input[name='address2']").focus();
					return false;
				}
				
				// 상세주소 입력여부 검사
				if (!$("input[name='address3']").val().isValue()) {
					alert("상세주소를 입력하세요.");
					$("input[name='address3']").focus();
					return false;
				}
				
				// 간단주소 입력여부 검사
				if (!$("input[name='address4']").val().isValue()) {
					alert("간단주소를 입력하세요.");
					$("input[name='address4']").focus();
					return false;
				}
				
				// 이메일 입력여부 검사
				if (!$("input[name='email']").val().isValue()) {
					alert("이메일을 입력하세요.");
					$("input[name='email']").focus();
					return false;
				}
				
				// 이메일 형식 검사
				if (!$("input[name='email']").val().isEmail()) {
					alert("이메일 주소의 형식에 맞지 않습니다.");
					$("input[name='email']").focus();
					return false;
				}
				
				// 홈페이지 입력여부 검사
				if (!$("input[name='homepage']").val().isValue()) {
					alert("홈페이지를 입력하세요.");
					$("input[name='homepage']").focus();
					return false;
				}
				
				// 홈페이지 형식 검사
				if (!$("input[name='homepage']").val().isUrl()) {
					alert("홈페이지의 형식에 맞지 않습니다.");
					$("input[name='homepage']").focus();
					return false;
				}
				
				// 상세정보 입력여부 검사
				if (!$("textarea[name='info']").val().isValue()) {
					alert("상세정보를 입력하세요.");
					$("textarea[name='info']").focus();
					return false;
				}
				
				// 연락처 입력여부 검사
				var tel = true;
				$("input[name='tel[]']").each(function(idx, item) {
					if (!$(item).val().isValue()) {
						alert("연락처를 입력하세요.");
						$(item).focus();
						tel = false;
					}
				});
				if (!tel) {
					return false;
				}
				
				
				// 이미지 입력여부 검사
				var image = true;
				$("input[name='image[]']").each(function(idx, item) {
					if (!$(item).val().isValue()) {
						alert("이미지를 추가하세요.");
						$(item).focus();
						image = false;
					}
				});
				if (!image) {
					return false;
				}
				
				// 룸이름 입력여부 검사
				if (!$("input[name='room_name[]']").val().isValue()) {
					alert("룸이름을 입력하세요.");
					$("input[name='room_name[]']").focus();
					return false;
				}
				
				// 최대인원 입력여부 검사
				if (!$("input[name='limit_person[]']").val().isValue()) {
					alert("최대인원을 입력하세요.");
					$("input[name='limit_person[]']").focus();
					return false;
				}
				
				// 비수기가격 입력여부 검사
				if (!$("input[name='off_price[]']").val().isValue()) {
					alert("비수기가격을 입력하세요.");
					$("input[name='off_price[]']").focus();
					return false;
				}
				
				// 성수기가격 입력여부 검사
				if (!$("input[name='on_price[]']").val().isValue()) {
					alert("성수기가격을 입력하세요.");
					$("input[name='on_price[]']").focus();
					return false;
				}
				
			});
			
			$("#frmTelAdd").click(function() {
				var new_div = $("<div>");
				new_div.addClass("input-group div_item");
				var new_input = $("<input>");
				new_input.addClass("input_item form-control");
				new_input.attr({
					'type' : 'tel', 'placeholder' : '연락처를 입력하세요', 'name' : 'tel[]'
				});
				var new_span = $("<span>");
				new_span.addClass("span_item input-group-addon");
				var new_button = $("<button>");
				new_button.attr("type=button");
				new_button.html('&times;');
				new_button.addClass("delete_btn close");
				
				new_button.click(function() {
			    	if (confirm("정말 선택하신 항목을 삭제하시겠습니까?")) {
			    		$(this).parents(".div_item").remove();
			    	}
			    });
				new_span.append(new_button);
				new_div.append(new_input).append(new_span);
				$("#tel_add").append(new_div);
				return false;
			});
			
			$("#frmImageAdd").click(function() {
				var new_div = $("<div>");
				new_div.addClass("input-group div_item");
				var new_input = $("<input>");
				new_input.addClass("input_item form-control");
				new_input.attr({
					'type' : 'text', 'placeholder' : '이미지를 추가하세요', 'name' : 'image[]'
				});
				var new_span = $("<span>");
				new_span.addClass("span_item input-group-addon");
				var new_button = $("<button>");
				new_button.attr("type=button");
				new_button.html('&times;');
				new_button.addClass("delete_btn close");
				
				new_button.click(function() {
			    	if (confirm("정말 선택하신 항목을 삭제하시겠습니까?")) {
			    		$(this).parents(".div_item").remove();
			    	}
			    });
				new_span.append(new_button);
				new_div.append(new_input).append(new_span);
				$("#image_add").append(new_div);
				return false;
			});
			
			$("#frmRoomAdd").click(function() {
				var new_div = $("<div>");
				new_div.addClass("form-group div_item");
				
				var new_div1 = $("<div>");
				new_div1.addClass("col-md-3 input-group div1_item");
				var new_span1 = $("<span>");
				new_span1.addClass("input-group-addon span1_item");
				new_span1.html("룸이름");
				var new_input1 = $("<input>");
				new_input1.addClass("form-control");
				new_input1.attr({
					'type' : 'text', 'id' : 'room_name', 'name' : 'room_name[]'
				});
				
				var new_div2 = $("<div>");
				new_div2.addClass("col-md-2 input-group div2_item");
				var new_span2 = $("<span>");
				new_span2.addClass("input-group-addon span_item2");
				new_span2.html("최대인원");
				var new_input2 = $("<input>");
				new_input2.addClass("form-control");
				new_input2.attr({
					'type' : 'text', 'id' : 'limit_person', 'name' : 'limit_person[]'
				});
				
				var new_div3 = $("<div>");
				new_div3.addClass("col-md-3 input-group div3_item");
				var new_span3 = $("<span>");
				new_span3.addClass("input-group-addon span_item3");
				new_span3.html("비수기가격");
				var new_input3 = $("<input>");
				new_input3.addClass("form-control");
				new_input3.attr({
					'type' : 'text', 'id' : 'off_price', 'name' : 'off_price[]'
				});
				
				var new_div4 = $("<div>");
				new_div4.addClass("col-md-3 input-group div4_item");
				var new_span4 = $("<span>");
				new_span4.addClass("input-group-addon span_item4");
				new_span4.html("성수기가격");
				var new_input4 = $("<input>");
				new_input4.addClass("form-control");
				new_input4.attr({
					'type' : 'text', 'id' : 'on_price', 'name' : 'on_price[]'
				});
				
				var new_div5 = $("<div>");
				new_div5.addClass("col-md-1 div5_item");
				var new_input5 = $("<input>");
				new_input5.addClass("close");
				new_input5.attr({
					'type' : 'button', 'value' : 'x'
				});
				
				new_input5.click(function() {
			    	if (confirm("정말 선택하신 항목을 삭제하시겠습니까?")) {
			    		$(this).parents(".div_item").remove();
			    	}
			    });
				
				new_div1.append(new_span1).append(new_input1);
				new_div2.append(new_span2).append(new_input2);
				new_div3.append(new_span3).append(new_input3);
				new_div4.append(new_span4).append(new_input4);
				new_div5.append(new_input5);
				new_div.append(new_div1).append(new_div2).append(new_div3).append(new_div4).append(new_div5);
				$("#room_add").append(new_div);
				return false;
			});
		});
	</script>

</body>
</html>